import React, { useState, useEffect } from 'react';
import { Row, Col, Form } from 'antd';
import { Link, router, withRouter } from 'umi';
import pageTabUtil from '@/utils/pageTabUtil';
import moment from 'moment';

const BaseInfo = ({ user, location, wrapperLayout = {} }) => {
    const {
        employeeName,
        positionName,
        organizationName,
        hopeResignationDate,
        turnoverLink = '',
        leaveProcessInstanceName,
        rankValue,
        companyName
    } = user;
    const { labelCol, wrapperCol } = wrapperLayout;
    const [inLayout, setInLayout] = useState(wrapperLayout);

    useEffect(() => {
        if (wrapperLayout && Object.keys(wrapperLayout).length > 0) {
            setInLayout({
                labelCol: { span: labelCol?.span * 2 },
                wrapperCol: wrapperCol?.span - labelCol?.span * 2
            });
        }
    }, [wrapperLayout]);

    return (
        <Row>
            <Col span={24}>
                <Form.Item label="员工姓名" {...wrapperLayout}>
                    {employeeName}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="行政机构" {...inLayout}>
                    {companyName}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="组织机构" {...inLayout}>
                    {organizationName || '--'}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="职位" {...inLayout}>
                    {positionName}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="职级" {...inLayout}>
                    {rankValue}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="离职日期" {...inLayout}>
                    {moment(hopeResignationDate).format('YYYY-MM-DD')}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="离职审批情况" {...inLayout}>
                    <Link
                        to={turnoverLink}
                        onClick={e => {
                            // 如果是在我的申请打开的就在当前页，不打开新的tab！！！tab菜单有问题
                            if (!location?.pathname.includes('/personal/portal/myApplication/detail')) {
                                pageTabUtil.openTab(turnoverLink);
                                history.push(turnoverLink);
                                e.preventDefault();
                            }
                        }}
                    >
                        {leaveProcessInstanceName}
                    </Link>
                </Form.Item>
            </Col>
        </Row>
    );
};

export default withRouter(BaseInfo);
